<template>
	<view>
		<view class="pagesmain">
			<view class="header">
				<view class="headerclose" @click="closefun()">
					<text class="tn-icon-close"></text>
				</view>
				<view class="headertxt">选择忙碌时间</view>
				<view class="headr" @click="daybusyfun()">全天忙碌</view>
			</view>
			<view class="selecttime">
				<view class="timeperiod flex marginAuto">
					<view class="timeperiodeach" @click="actimetypefun(1)" :class="actimetype == 1 ? 'actimeeach':''">{{ starttime == '' ? '开始时间':starttime }}</view>
					<view class="timeperiodeach" @click="actimetypefun(2)" :class="actimetype == 2 ? 'actimeeach':''">{{ endtime == '' ? '结束时间':endtime }}</view>
				</view>
				<view class="timeblock marginAuto flex">
					<view class="timeeach" 
					@click="actimefun(item,index)" 
					v-for="(item,index) in timedata" :key="index"
					:class="item.ac ? 'actimeeach':''"
					>{{ item.time }}</view>
				</view>
				<view class="timeperiod flex marginAuto">
					<view class="timeperiodeach" style="border: 1px solid #ccc;" @click="resetfun()">重置</view>
					<view class="timeperiodeach" style="border: 1px solid #ccc;background:#0E71EB;color:#fff;" @click="enter">确定</view>
				</view>
			</view>
			<view class="context marginAuto">
				<view class="contexttitle">排班信息</view>
				<view class="contextblock marginAuto">
					<view class="contexteach flex" v-for="(item,index) in contextdata" :key="index">
						<text v-if="item.type == 1">有单时间：{{ item.start_time }}-{{ item.end_time }}</text>
						<text v-if="item.type === 0">忙碌时间：{{ item.start_time }}-{{ item.end_time }}</text>
						<view class="closerw" @click="cancelfun(item,index)">取消</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['clickitem','showyer','showmonth'],
		data() {
			return {
				apifun:this.apifun,
				clickitemdata:{},
				showday:'',
				timedata:[],
				contextdata:[],
				actimetype:1,
				starttime:'',
				endtime:''
			};
		},
		created() {
			this.clickitemdata = this.clickitem;
			this.showday = this.clickitem.day_format;
			this.seefun();
			this.timedatafun();
		},
		methods: {
			enter(){
				if(this.starttime == '' || this.endtime == ''){
					this.apifun.toast('请选择时间');
					return false
				};
				let sendData = {
					start_time:this.showyer+'-'+this.showmonth+'-'+this.showday+' '+this.starttime,
					end_time:this.showyer+'-'+this.showmonth+'-'+this.showday+' '+this.endtime,
				};
				this.apifun.unirequest('/partner/duty/setBusyTime','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.apifun.toast("设置成功");
						this.$emit('clsoeicon')
						this.$emit('enter')
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			daybusyfun(){  // 全天忙碌
				let sendData = {
					day:this.showyer+'-'+this.showmonth+'-'+this.showday
				};
				this.apifun.unirequest('/partner/duty/setBusyTime','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.apifun.toast("设置成功");
						this.$emit('clsoeicon')
						this.$emit('enter')
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			cancelfun(item,index){  // 取消值班
				let sendData = {
					id:item.id
				};
				uni.showModal({
					title: '取消排班',
					content: '确定要取消排班吗？',
					success:(res) => {
						if (res.confirm) {
							this.apifun.unirequest('/partner/duty/cancel','post',sendData,(res)=>{
								if(res.code === 200){
									let datas = res.data;
									this.$emit('enter');
									this.contextdata.splice(index,1)
								}else{
									this.apifun.toast(res.msg)
								}
							})
						} else if (res.cancel) {}
					}
				});
			},
			resetfun(){
				this.starttime = '';
				this.endtime = '';
				this.timedata.forEach((item,index)=>{
					this.$set(item,'ac',false)
				})
			},
			actimefun(item){
				this.timedata.forEach((item,index)=>{
					this.$set(item,'ac',false)
				});
				this.$set(item,'ac',true);
				if(this.actimetype == 1){
					this.starttime = item.time
				}else{
					this.endtime = item.time
				}
			},
			actimetypefun(type){
				this.actimetype = type;
				let piptime = '';
				if(type == 1){
					piptime = this.starttime
				}else{
					piptime = this.endtime
				}
				this.timedata.forEach((item,index)=>{
					if(item.time == piptime){
						this.$set(item,'ac',true)
					}else{
						this.$set(item,'ac',false)
					}
				})
			},
			seefun(){
				if(this.clickitemdata.type == 1 || this.clickitemdata.type === 0){
					let sendData = {
						day:this.clickitemdata.day
					};
					this.apifun.unirequest('/partner/duty/getDayList','post',sendData,(res)=>{
						if(res.code === 200){
							let datas = res.data;
							this.contextdata = datas;
						}else{
							this.apifun.toast(res.msg)
						}
					})
				}
			},
			timedatafun(){
				for(var i=0;i<=23;i++){
					i = i<10 ? '0'+i : i;
					this.timedata.push({
						time:i+':00'
					})
				}
			},
			closefun(){
				this.$emit('clsoeicon');
			}
		},
	};
</script>

<style scoped lang="scss">
	.pagesmain{
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: #F7F7F7;
	}
	.header{
		position:sticky;
		top: 0;
		z-index: 99;
		width: 100%;
		height: 100rpx;
		background: #fff;
		.headerclose{
			position: absolute;
			top: 0;
			left: 24rpx;
			line-height: 100rpx;
			font-size: 38rpx;
		}
		.headertxt{
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}
		.headr{
			position:absolute;
			top:20rpx;
			right:24rpx;
			width: 120rpx;
			line-height:60rpx;
			font-size: 22rpx;
			color: #fff;
			text-align: center;
			background:#0E71EB;
			border-radius:10rpx;
		}
	}
	.selecttime{
		width: 690rpx;
		background:#fff;
		margin: 20rpx auto;
		padding-bottom: 20rpx;
		border-radius: 20rpx;
	}
	.timeperiod{
		width: 690rpx;
		line-height: 80rpx;
		padding: 20rpx 0;
		justify-content: space-around;
		.timeperiodeach{
			width: 200rpx;
			text-align: center;
			line-height:60rpx;
			color: #333;
			font-size: 28rpx;
			border-radius: 10rpx;
		}
		.actimeeach{
			color:#0E71EB;
		}
	}
	.timeblock{
		width: 690rpx;
		justify-content: space-between;
		flex-wrap: wrap;
		.timeeach{
			width: 130rpx;
			line-height: 50rpx;
			margin: 20rpx;
			border: 1px solid #ccc;
			text-align: center;
			border-radius: 10rpx;
		}
		.actimeeach{
			background:#0E71EB;
			color: #fff;
		}
	}
	.context{
		width: 690rpx;
		padding:20rpx;
		background:#fff;
		margin-top: 20rpx;
		border-radius: 20rpx;
		.contexttitle{
			color: #333;
			font-size:34rpx;
			font-weight:600;
		}
		.contextblock{
			width: 90%;
			margin-top: 20rpx;
			.contexteach{
				line-height: 60rpx;
				font-size:34rpx;
				margin-bottom: 10rpx;
				.closerw{
					margin-left:50rpx;
					background:#0E71EB;
					color: #fff;
					font-size:32rpx;
					width:140rpx;
					text-align: center;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>